import Head from "next/head";
import Link from 'next/link'
import React, { useState, useEffect } from "react";
import { Row, Col, List, Icon, Breadcrumb } from "antd";
import axios from 'axios'
import servicePath  from '../config/apiUrl'

import Header from "./components/Header";
import Author from "./components/Author";
import Advert from "./components/Advert";
import Footer from "./components/Footer";

const ArticleList = () => {

  const [myList, setMyList] = useState(list.data);

  useEffect(() => {
    setMyList(list.data)
  })

  return (
    <div className="bread-div">
      <Head>
        <title>ArticleList</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <Breadcrumb>
            <Breadcrumb.Item>
              <a href="/">首页</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>视频列表</Breadcrumb.Item>
          </Breadcrumb>

          <List
            itemLayout="vertical"
            dataSource={myList}
            renderItem={(item) => (
              <List.item>
                <div className="list-title">
                  <Link href={{pathname: '/detailed', query: { id: item.id }}}>
                    <a>{item.title}</a>
                  </Link>
                </div>
                <div className="list-icon">
                  <span>
                    <Icon type="calendar" /> {item.addTime}
                  </span>
                  <span>
                    <Icon type="folder" /> {item.typeName}
                  </span>
                  <span>
                    <Icon type="fire" /> {item.view_count}人
                  </span>
                </div>
                <div className="list-context">{item.introduce}</div>
              </List.item>
            )}
          ></List>
        </Col>

        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  );
};

ArticleList.getInitialProps = async (content) => {
  let id = content.query.id;
  const promise = new Promise((resolve, reject) => {
    axios(servicePath.getListById + id).then(
      (res) => {
        resolve(res.data)
      }
    ).catch( (err) => {
      reject(err)
    })
  })

  return await promise
}

export default ArticleList;
